<template>
    <div>
        <el-dialog v-model="visible" title="修改学生">
            <el-form :model="student">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="student.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="student.age" autocomplete="off" />
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-radio-group v-model="student.gender" >
                        <el-radio label="男" size="large">男</el-radio>
                        <el-radio label="女" size="large">女</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="visible = false"
                        >取消</el-button
                    >
                    <el-button
                        type="primary"
                        @click="handleUpdate"
                    >
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { defineEmits,ref,computed } from 'vue';
import {update} from '../../services/student';
import { useStudentStore } from '../../stores/student';
const emit = defineEmits(['show']);
const studentStore = useStudentStore();
const {updateVisible,student} = storeToRefs(studentStore);
const {setUpdateVisible} = studentStore;
const visible = computed({
    get(){
        return updateVisible.value;
    },
    set(visible){
        setUpdateVisible(visible);
    }
});
const handleUpdate = async () => {
    await update(student.value);
    emit('show');
    visible.value = false;
}
</script>
